import React from 'react';
import Modal from '../../common/Modal';
import {createForm} from 'rc-form';
import {Card, List, InputItem, Picker, TextareaItem, WhiteSpace } from 'antd-mobile';

import Title from '../../common/Title';

import './index.sass';

@createForm()
export default class AddCustomer extends React.Component{
  constructor(props) {
    super(props);
    
  }
  render() {
    const {getFieldDecorator} = this.props.form;

    return (
      <Modal
        className = 'add-customer-container'
        cancelText='关闭'
        rightContent={[<span key={1} className='pointer'>保存</span>]}
        visible={this.props.visible}
        title='新增客户'
      >
        <Card>
          <Card.Header title={<Title title='客户基本信息'/>}/>
          <Card.Body>
            <List className='global-list'>

              {getFieldDecorator('type', {
                rules: [{}]
              })(<Picker
                key="type"
                extra="请选择"
                cols={1}
                data={[{ label: '企业', value: 1 }, { label: '社会组织', value: 2 }, { label: '境外客户', value: 0 }]}
                title="客户类型"
                onOk={e => console.log('ok', e)}
                onDismiss={e => console.log('dismiss', e)}
              >
                <List.Item arrow="horizontal">客户类型</List.Item>
              </Picker>)}

              {getFieldDecorator('name', {
                rules: [
                  {
                    required: true,
                    message: '必填!'
                  }
                ]
              })(<InputItem clear placeholder="必填">
                  客户名称
              </InputItem>)}
              
              {getFieldDecorator('type', {
                rules: [{}]
              })(<Picker
                key="type"
                extra="请选择"
                cols={1}
                data={[{ label: '企业', value: 1 }, { label: '社会组织', value: 2 }, { label: '境外客户', value: 0 }]}
                title="客户类型"
                onOk={e => console.log('ok', e)}
                onDismiss={e => console.log('dismiss', e)}
              >
                <List.Item arrow="horizontal">客户所在地</List.Item>
              </Picker>)}

              {getFieldDecorator('type', {
                rules: [{}]
              })(<Picker
                key="type"
                extra="请选择"
                cols={1}
                data={[{ label: '企业', value: 1 }, { label: '社会组织', value: 2 }, { label: '境外客户', value: 0 }]}
                title="客户类型"
                onOk={e => console.log('ok', e)}
                onDismiss={e => console.log('dismiss', e)}
              >
                <List.Item arrow="horizontal">客户来源</List.Item>
              </Picker>)}

              {getFieldDecorator('type', {
                rules: [{}]
              })(<Picker
                key="type"
                extra="请选择"
                cols={1}
                data={[{ label: '企业', value: 1 }, { label: '社会组织', value: 2 }, { label: '境外客户', value: 0 }]}
                title="客户类型"
                onOk={e => console.log('ok', e)}
                onDismiss={e => console.log('dismiss', e)}
              >
                <List.Item arrow="horizontal">客户等级</List.Item>
              </Picker>)}

              {getFieldDecorator('type', {
                rules: [{}]
              })(<Picker
                key="type"
                extra="请选择"
                cols={1}
                data={[{ label: '企业', value: 1 }, { label: '社会组织', value: 2 }, { label: '境外客户', value: 0 }]}
                title="客户类型"
                onOk={e => console.log('ok', e)}
                onDismiss={e => console.log('dismiss', e)}
              >
                <List.Item arrow="horizontal">公司规模</List.Item>
              </Picker>)}

              {getFieldDecorator('type', {
                rules: [{}]
              })(<Picker
                key="type"
                extra="请选择"
                cols={1}
                data={[{ label: '企业', value: 1 }, { label: '社会组织', value: 2 }, { label: '境外客户', value: 0 }]}
                title="客户类型"
                onOk={e => console.log('ok', e)}
                onDismiss={e => console.log('dismiss', e)}
              >
                <List.Item arrow="horizontal">预计参保人数</List.Item>
              </Picker>)}

              {getFieldDecorator('type', {
                rules: [{}]
              })(<Picker
                key="type"
                extra="请选择"
                cols={1}
                data={[{ label: '企业', value: 1 }, { label: '社会组织', value: 2 }, { label: '境外客户', value: 0 }]}
                title="客户类型"
                onOk={e => console.log('ok', e)}
                onDismiss={e => console.log('dismiss', e)}
              >
                <List.Item arrow="horizontal">员工参保情况</List.Item>
              </Picker>)}

              {getFieldDecorator('type', {
                rules: [{}]
              })(<Picker
                key="type"
                extra="请选择"
                cols={1}
                data={[{ label: '企业', value: 1 }, { label: '社会组织', value: 2 }, { label: '境外客户', value: 0 }]}
                title="客户类型"
                onOk={e => console.log('ok', e)}
                onDismiss={e => console.log('dismiss', e)}
              >
                <List.Item arrow="horizontal">合作意向</List.Item>
              </Picker>)}

              {getFieldDecorator('type', {
                rules: [{}]
              })(<Picker
                key="type"
                extra="请选择"
                cols={1}
                data={[{ label: '企业', value: 1 }, { label: '社会组织', value: 2 }, { label: '境外客户', value: 0 }]}
                title="客户类型"
                onOk={e => console.log('ok', e)}
                onDismiss={e => console.log('dismiss', e)}
              >
                <List.Item arrow="horizontal">客户需求</List.Item>
              </Picker>)}

              {getFieldDecorator('remark', {
                rules: [{}]
              })(<TextareaItem rows={5} count={100} placeholder="请填写" title="备注" />)}

            </List>
          </Card.Body>
        </Card>

        <WhiteSpace />

        <Card>
          <Card.Header title={<Title title='企业基本信息'/>}/>
          <Card.Body>
            <List className='global-list'>

              {getFieldDecorator('type', {
                rules: [{}]
              })(<Picker
                key="type"
                extra="(必填)"
                cols={1}
                data={[{ label: '企业', value: 1 }, { label: '社会组织', value: 2 }, { label: '境外客户', value: 0 }]}
                title="行业类型"
                onOk={e => console.log('ok', e)}
                onDismiss={e => console.log('dismiss', e)}
              >
                <List.Item arrow="horizontal">行业类型</List.Item>
              </Picker>)}

              {getFieldDecorator('name', {
                rules: [
                  {
                    required: true,
                    message: '请填写!'
                  }
                ]
              })(<InputItem clear placeholder="请填写">
                邮件(工商备案)
              </InputItem>)}
              
              {getFieldDecorator('name', {
                rules: [
                  {
                    required: true,
                    message: '请填写!'
                  }
                ]
              })(<InputItem clear placeholder="请填写">
                电话(工商备案)
              </InputItem>)}
              
              {getFieldDecorator('name', {
                rules: [
                  {
                    required: true,
                    message: '请填写!'
                  }
                ]
              })(<InputItem clear placeholder="请填写">
                办公地址(工商备案)
              </InputItem>)}

              {getFieldDecorator('name', {
                rules: [
                  {
                    required: true,
                    message: '请填写!'
                  }
                ]
              })(<InputItem clear placeholder="请填写">
                邮件(现)
              </InputItem>)}
              
              {getFieldDecorator('name', {
                rules: [
                  {
                    required: true,
                    message: '请填写!'
                  }
                ]
              })(<InputItem clear placeholder="请填写">
                电话(现)
              </InputItem>)}
              
              {getFieldDecorator('name', {
                rules: [
                  {
                    required: true,
                    message: '请填写!'
                  }
                ]
              })(<InputItem clear placeholder="请填写">
                办公地址(现)
              </InputItem>)}

            </List>
          </Card.Body>
        </Card>

        <WhiteSpace />

        <Card>
          <Card.Header title={<Title title='联系人信息'/>}/>
          <Card.Body>
            <List className='global-list'>

              {getFieldDecorator('name', {
                rules: [
                  {
                    required: true,
                    message: '(必填)'
                  }
                ]
              })(<InputItem clear placeholder="(必填)">
                姓名
              </InputItem>)}
              
              {getFieldDecorator('sex', {
                rules: [{}]
              })(<Picker
                key="sex"
                extra="(必填)"
                cols={1}
                data={[{ label: '男', value: 1 }, { label: '女', value: 2 }, { label: '保密', value: 0 }]}
                title="性别"
                onOk={e => console.log('ok', e)}
                onDismiss={e => console.log('dismiss', e)}
              >
                <List.Item arrow="horizontal">性别</List.Item>
              </Picker>)}

              {getFieldDecorator('name', {
                rules: [
                  {
                    required: true,
                    message: '(必填)'
                  }
                ]
              })(<InputItem clear placeholder="(必填)">
                联系人职位
              </InputItem>)}

              {getFieldDecorator('type', {
                rules: [{}]
              })(<Picker
                key="type"
                extra="(必填)"
                cols={1}
                data={[{ label: '企业', value: 1 }, { label: '社会组织', value: 2 }, { label: '境外客户', value: 0 }]}
                title="联系人角色"
                onOk={e => console.log('ok', e)}
                onDismiss={e => console.log('dismiss', e)}
              >
                <List.Item arrow="horizontal">联系人角色</List.Item>
              </Picker>)}

              {getFieldDecorator('name', {
                rules: [
                ]
              })(<InputItem clear placeholder="请填写">
                手机号码
              </InputItem>)}

              {getFieldDecorator('name', {
                rules: [
                ]
              })(<InputItem clear placeholder="请填写">
                固定电话
              </InputItem>)}

              {getFieldDecorator('remark', {
                rules: [{}]
              })(<TextareaItem rows={5} count={100} placeholder="请填写" title="备注" />)}

            </List>
          </Card.Body>
        </Card>

      </Modal>
    );
  }
}